<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/public/include/taglib.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<!--[if IE 8]>
<html lang="zh" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<!--<![endif]-->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="${imagesPath}/rock/login/favicon.png" type="image/png">
<meta name="decorator" content="decRockIndex" />
<title>登录首页5</title>
<!-- ======基础样式开始======-->
<link href="${pluginsPath}/bootstrap/3.2.0/css_rock/style.default.css" type="text/css" rel="stylesheet" />
<link href="${basePath}/static/rock/css/tab-control.css" rel="stylesheet">
<!--换肤-->
<link href="${pluginsPath}/bootstrap/3.2.0/css_rock/style.katniss.css" type="text/css" rel="stylesheet" />
<!--IE8兼容样式-->
<link href="${pluginsPath}/bootstrap/3.2.0/css_rock/navigateLowerIE8.css" type="text/css" rel="stylesheet" />
<!--附加js开始-->
<script src="${pluginsPath}/jquery/jquery-1.11.1.min.js"></script>
<script src="${pluginsPath}/jquery/jquery-migrate-1.2.1.min.js"></script>
<script src="${pluginsPath}/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="${pluginsPath}/modernizr/modernizr.min.js"></script>
<script src="${pluginsPath}/retina/retina.min.js"></script>
<script src="${pluginsPath}/jquery/jquery-ui-1.10.3.min.js"></script>
<script src="${basePath}/static/rock/js/custom.js"></script>
</head>
<body class="stickyheader">
	<!-- Preloader -->
	<div id="preloader">
		<div id="status">
			<i class="fa fa-spinner fa-spin"></i>
		</div>
	</div>
	<section>
	<div class="leftpanel sticky-leftpanel">
		<div class="leftpanelinner">
			<!-- This is only visible to small devices -->
			<div class="visible-xs hidden-sm hidden-md hidden-lg">
				<div class="media userlogged">
					<span class="pull-left">
						<i class="fa fa-user"></i>
					</span>
					<div class="media-body">
						<h4 class="text-primary">张无忌</h4>
					</div>
				</div>
				<ul class="nav nav-pills nav-stacked">
					<li>
						<a href="locked.html">
							<i class="fa fa-sign-out"></i>
							<span>注销</span>
						</a>
					</li>
				</ul>
			</div>
			<a class="menutoggle">
				<i class="fa fa-bars"></i>
			</a>
			<ul id="ulMenu" class="nav nav-pills nav-stacked nav-bracket">
				<li class="active  home">
					<a href="${basePath}/home">
						<i class="fa fa-home"></i>
						<span>主页</span>
					</a>
				</li>
				<!-- 生成菜单-->
			</ul>
		</div>
		<!-- leftpanelinner -->
	</div>
	<!-- leftpanel -->
	<div class="mainpanel">
		<div class="headerbar">
			<div class="header-left">
				<div class="topnav">
					<div class="logopanel">
						<h1 class="m-r-10 m-l-10">
							<img src="${imagesPath}/rock/login/postal_logo.png" width="29" height="26">
							全渠道运营管理平台
						</h1>
					</div>
					<!-- logopanel -->
				</div>
			</div>
			<div class="toggle-bar-div visible-xs visible-sm">
				<a class="toggle-bars" href="#">
					<i class="fa fa-bars"></i>
				</a>
			</div>
			<div class="header-middle hidden-xs">
				<ul id="ulTopMenu" class="headermenu">
					<c:forEach items="${topMenuList}" var="topMenu" varStatus="idxStatus">
						<c:if test="${idxStatus.index<5 }">
							<li class="liTopMenu">
								<button id="sys_${topMenu.id }" class="btn btn-default  tp-icon  active" urlpath="${basePath}/${topMenu.url}">
									<i class="${topMenu.icon}"></i>
									${topMenu.menuName }
								</button>
							</li>
						</c:if>
					</c:forEach>
					<c:if test="${topMenuList!= null && fn:length(topMenuList) > 5}">
						<li>
							<div class="btn-group">
								<button type="button" class="btn btn-default tp-icon dropdown-toggle" data-toggle="dropdown">
									更多
									<span class="caret"></span>
								</button>
								<ul class="dropdown-menu dropdown-menu-usermenu pull-right">
									<c:forEach items="${topMenuList}" var="topMenu" varStatus="idxStatus">
										<c:if test="${idxStatus.index>=5 }">
											<li class="liTopMenu">
												<a id="sys_${topMenu.id }" class=" moremenu" href="#" urlpath="${basePath}/${topMenu.url}">
													<i class="${topMenu.icon}"></i>
													${topMenu.menuName }
												</a>
											</li>
										</c:if>
									</c:forEach>
								</ul>
							</div>
						</li>
					</c:if>
				</ul>
			</div>
			<div class="header-right " style="background: #87CEFF;">
				<ul class="headermenu">
					<li>
						<div class="btn-group">
							<button class="btn btn-default tp-icon">
								<i class="fa  fa-graduation-cap"></i>
								${user.deptName}
							</button>
						</div>
					</li>
					<li>
						<div class="btn-group">
							<button type="button" class="btn btn-default tp-icon dropdown-toggle" data-toggle="dropdown">
								<i class="fa fa-user"></i>
								${user.username}
								<span class="caret"></span>
							</button>
							<ul class="dropdown-menu dropdown-menu-usermenu pull-right">
								<li>
									<a href="${basePath}/home">
										<i class="fa fa-user"></i>
										修改密码
									</a>
								</li>
								<li>
									<a href="${basePath}/logout">
										<i class="fa fa-sign-out"></i>
										注销
									</a>
								</li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
			<!-- header-right end -->
		</div>
		<!-- headerbar -->
		<div class="tab-control">
			<!-- 标签 -->
			<div class="tab simple">
				<form>
					<input class="prev" type="button">
					<input class="next" type="button">
					<input class="find" type="button">
				</form>
				<ul>
					<!-- <li>标签<a href="javascript:;">关闭</a></li> -->
					<li index="0" tab="首页" class="hover" style="">
						首页
						<a href="javascript:;">关闭</a>
					</li>
				</ul>
			</div>
			<!-- 标签查找 -->
			<div class="tab-find hidden">
				<form>
					<input class="text" type="text">
				</form>
				<ul>
					<!-- <li>标签<a href="javascript:;">关闭</a></li> -->
					<li index="0" tab="首页">
						首页
						<a href="javascript:;">关闭</a>
					</li>
				</ul>
			</div>
			<!-- 主体 -->
			<div class="main">
				<!-- <iframe scrolling="auto" frameborder="0"></iframe>-->
				<iframe id="iframeIndex" src="${basePath}/home" scrolling="auto" frameborder="0" reload="undefined" class="" style="height: 100%"></iframe>
			</div>
		</div>
		<!-- contentpanel -->
	</div>
	<!-- mainpanel -->
	<div class="footerpanel">
		2017. 版权所有
		<i class="fa fa-copyright"></i>
		中国邮政集团公司重庆市信息技术局${rockSessionId}
	</div>
	</section>
	<!--附加js结束-->
	<!--当前页js开始-->
	<!--右侧tab标签-->
	<script src="${basePath}/static/rock/js/tab-control.js"></script>
	<script src="${basePath}/static/rock/js/commonUtil.js" type="text/javascript"></script>
	<script type="text/javascript">
		//全局变量
		var jsBasePath = "${basePath}";
		$(document).ready(function(){
			//点击top系统菜单 
			$(".liTopMenu  button.btn, .liTopMenu  a.moremenu").click(function(){
				//将之前的背景清空后再将点击的颜色变亮
				$(".liTopMenu  button.btn, .liTopMenu  a.moremenu").css("background-color", "");
				$(this).css("background-color", "#00CDCD");
				//加载菜单参数为id(ou_permission 中系统菜单对应的ID，被该为sys_xxx)
				loadMenuAjax(this.id);
			});
			$("#ulTopMenu button").first().click();//进入页面默认点中第一个
		});

		/*
			加载菜单，通过ajax加载
		 */
		function loadMenuAjax(sysid){
			sysid = sysid.substring(4);//取ID值
			var flag = false;
			$.ajax({
				url : "${aPath}/index/sysmenu/" + sysid,
				data : {},
				type : "POST",
				dataType : "json",
				success : function(result){
					console.log(result);
					$("#ulMenu .nav-parent").empty();//清空菜单区,主页不清空
					var menuHtml = result.extend.menuHtml;//html格式的菜单
					var menuList = result.extend.menuList;//menu对象格式的菜单
					console.log("menuhtml=========");
					console.log(menuHtml);
					console.log("menuList=========");
					console.log(menuList);

					//document.getElementById('ulMenu').innerHTML = menuhtml;
					$("#ulMenu").append($(menuHtml));

					//loadMenu(result);//组装菜单
					loadjscssfile('${basePath}/static/rock/js/custom.js', "js"); //加载你的js文件

				},
				error : function(){
					alert('获取菜单失败！');
				}
			});
		}
		/*
		将ajax返回结果加载到菜单区域
		 */
		function loadMenu(result){
			//111为成功
			if (result.code != 111) {
				//var menuString = result.extend.menuHtml;
				//$("#ulMenu").append(menuString);
				//loadEvent();//重新綁定事件
			} else {
				var menuList = result.extend.menuList;
				//top菜单等级为0，左侧菜单等级一次为1、2、3、4
				//var li_nav_parent = $("<li></li>").addClass("nav_parent");
				//var ul_children = $("<ul></ul>").addClass("children");
				//var ul_nav_third_children = $("<ul></ul>").addClass("nav-third-children");
				var size = menuList.length;
				var li_nav_parent = $("<li class='nav_parent'></li>");
				var oneIsEnd = 2;//每碰到一级菜单则减1，为偶数时将上一组加入到页面，同时清空该组
				for (var i = 0; i < size; i++) {
					var menu = menuList[i];//菜单对象
					var nowRank = menu.rank;//当前等级
					/*
						1、判断是否是叶子规则：下一等级大于当前等级则当前的是非叶子，否则是叶子
					 	2、只有点击叶子才会相应action，点击非叶子下拉显示叶子
						3、最后一个一定是叶子
					 */

					var menuOnclickStr = null;//创建菜单标签
					if (i == size - 1) {
						//叶子li标签===begin======
						var leaf = $("<li></li>")
						var leaf_a = $("<a></a>").attr("href", "javascript:;").attr("onclick",
								"TabControlAppend('" + menu.id + "','" + menu.menuName + "','" + menu.url + "')");
						if (menu.icon != "") {
							leaf_a.append($("<i></i>").addClass(menu.icon));
						}
						if (nowRank == 1) {
							//第一层要加span标记
							leaf_a.append($("<span></span>").append(menu.menuName));
						} else {
							leaf_a.append(menu.menuName);
						}
						leaf.append(leaf_a);
						//叶子li标签====end=======
						menuOnclickStr = leaf;

					} else {
						var nextRank = menuList[i + 1].rank;//下一等级
						if (nextRank > nowRank) {
							//非叶子a标签=======begin======
							var notleaf = $("<a></a>").attr("href", "####");
							notleaf.append("<li class=\"" + menu.icon + "\"></li>").append("<span>" + menu.menuName + "</span>");
							//非叶子a标签=========end======
							menuOnclickStr = notleaf;
						} else {

							//叶子li标签===begin======
							var leaf333 = $("<li></li>")
							var leaf_a333 = $("<a></a>").attr("href", "javascript:;").attr("onclick",
									"TabControlAppend('" + menu.id + "','" + menu.menuName + "','" + menu.url + "')");
							if (menu.icon != "") {
								leaf_a333.append($("<i></i>").addClass(menu.icon));
							}
							if (nowRank == 1) {
								//第一层要加span标记
								leaf_a333.append($("<span></span>").append(menu.menuName));
							} else {
								leaf_a333.append(menu.menuName);
							}
							leaf333.append(leaf_a333);
							//叶子li标签====end=======
							menuOnclickStr = leaf333;

						}
					}

					var ul_children = $("<ul></ul>").addClass("children");//二级
					var ul_nav_third_children = $("<ul></ul>").addClass("nav-third-children");//三级
					console.log("========i====" + i);
					if (nowRank == 1) {
						oneIsEnd++;
						if (oneIsEnd % 2 == 0) {
							//是偶数是将菜单组加载到页面，并清空该组
							console.log(i + "============");
							console.log(li_nav_parent);
							//li_nav_parent.addClass("nav_parent");
							li_nav_parent.appendTo("#ulMenu");
							$("#ulMenu").trigger("create")
							//$("#ulMenu").accordion();
							break;
							//li_nav_parent.empty();//清空所有元素
						}
						li_nav_parent.append(menuOnclickStr);

					}
					if (nowRank == 2) {
						ul_children.append(menuOnclickStr);
						li_nav_parent.append(ul_children);
					}
					if (nowRank == 3) {
						ul_nav_third_children.append(menuOnclickStr);
						ul_children.append(ul_nav_third_children);
						li_nav_parent.append(ul_children);
					}
				}
				//li_nav_parent.appendTo("#ulMenu");//最后一组加入到页面

			}
		}

		//动态加载 js /css 
		function loadjscssfile(filename , filetype){
			if (filetype == "js") { //判定文件类型
				var fileref = document.createElement('script')//创建标签
				fileref.setAttribute("type", "text/javascript")//定义属性type的值为text/javascript
				fileref.setAttribute("src", filename)//文件的地址
			} else if (filetype == "css") { //判定文件类型
				var fileref = document.createElement("link")
				fileref.setAttribute("rel", "stylesheet")
				fileref.setAttribute("type", "text/css")
				fileref.setAttribute("href", filename)
			}
			if (typeof fileref != "undefined")
				document.getElementsByTagName("head")[0].appendChild(fileref)
		}
	</script>
</body>
</html>
